<template>
	<view>
		<uni-popup ref="upInvite" mode="center">
			<view class="bgfff width1500 ra20">
				<image @click="$refs.upInvite.close()" mode="widthFix" class="image posiab right30 top20 width50"
					src="/static/img/bi.png"></image>
				<view class="size36 color333 bold flex-a-i pl50 pb30 pt30  border-bebecef">
					<view class="wh6-30 mt8 bg2C7BFF mr15"></view>邀请
				</view>
				<view class="pg30">
					<view class="borderEBECEF  flex">
						<view class="border-rEBECEF pg30" style="flex: 0 0 55%;">
							<el-input v-model="searchVlaue" style="width: 240px" @change="onSearch" placeholder="搜索组织/用户/终端/设备" />
							<el-tabs @tab-change="tabClick" v-model="activeName" class="demo-tabs">
								<el-tab-pane label="组织架构" name="first">
									<scroll-view scroll-y class="height800 scroll-view">
										<el-checkbox-group v-show="searchData" v-model="checkedCities"
											@change="meetingCheckedCitiesChange">
											<el-checkbox v-for="(item,k) in searchMeetingMonitor"  class="mb30" :key="k"
												:label="item.departmentName" :value="item">
												<view class="flex-a-i ">
													<image mode="widthFix" class="image width50 ml10 mr10"
														src="/static/img/xaing.png"></image>
													<view class="">
														<view class="color333 size24">{{item.departmentName}}</view>
														<view class="color4BBF92 size20 mt10"
															v-if="item.userOnlineStatus==1">
															在线</view>
														<view class="colore6e6e6 size20 mt10"
															v-else-if="item.userOnlineStatus==0">
															离线</view>
														<view class="color4BBF92 size20 mt10"
															v-else-if="item.userOnlineStatus==5">
															邀请中</view>
														<view class="color4BBF92 size20 mt10"
															v-else-if="item.userOnlineStatus==2">
															会议中</view>
													</view>
												</view>
											</el-checkbox>
										</el-checkbox-group>
										
										<el-tree v-show="!searchData" ref="myTree1" :data="tabdatapane"
											:check-on-click-node="true" @check="currentChange" show-checkbox
											node-key="userId" :expand-on-click-node="false"
											:default-checked-keys="defaultME">
											<template #default="{ node, data }">
												<view class="flex-a-i">
													<image mode="widthFix" class="image width50 ml10 mr10"
														src="/static/img/xaing.png"></image>
													<view class="">
														<view class="color333 size24">{{data.departmentName}}</view>
														
														<view class="color4BBF92 size20" v-if="data.userOnlineStatus==1">
															在线</view>
														<view class="colore6e6e6 size20"
															v-else-if="data.userOnlineStatus==0">
															离线</view>
														<view class="color4BBF92 size20"
															v-else-if="data.userOnlineStatus==5">
															邀请中</view>
														<view class="color4BBF92 size20" v-else-if="data.userOnlineStatus==2">
															会议中</view>
															
													</view>
												</view>
											</template>
										</el-tree>
									</scroll-view>
								</el-tab-pane>
								<el-tab-pane label="监控设备" name="second">
									<scroll-view scroll-y class="height800 scroll-view">
										<el-checkbox-group v-show="searchData" v-model="checkedCities"
											@change="monitorCheckedCitiesChange">
											<el-checkbox v-for="(data,k) in datasSearch" :key="k" class="mb30"
												:label="data.name" :value="data">
												<view class="flex-a-i posire">
													<image v-if="data.online_status==1" mode="widthFix"
														class="image width40 ml10 mr10" src="/static/zaixianyi.png">
													</image>
													<image v-else-if="data.online_status==2" mode="widthFix"
														class="image width40 ml10 mr10" src="/static/yichangyi.png">
													</image>
													<image v-else-if="data.online_status==0" mode="widthFix"
														class="image width40 ml10 mr10" src="/static/lixianyi.png">
													</image>
													<view class="">
														<view class="color333 size24">{{data.name}}</view>
														<view v-if="data.online_status==1"
															class="wh5-5 bg27e17a posiab left-40 top20"></view>
														<view v-else-if="data.online_status==0"
															class="wh5-5 bgfc474c posiab left-40 top20"></view>
														<view v-else-if="data.online_status==2"
															class="wh5-5 bgf17e2f posiab left-40 top20"></view>
													</view>
												</view>
											</el-checkbox>
										</el-checkbox-group>
										
										<el-tree v-show="!searchData" ref="myTree" @check="currentChange1"
											:check-on-click-node="true" :data="monitorLIST" show-checkbox node-key="id"
											:expand-on-click-node="false" :default-checked-keys="defaultME">
											<template #default="{ node, data }">
												<view class="flex-a-i posire">
													<image v-if="data.online_status==1" mode="widthFix"
														class="image width40 ml10 mr10" src="/static/zaixianyi.png">
													</image>
													<image v-else-if="data.online_status==2" mode="widthFix"
														class="image width40 ml10 mr10" src="/static/yichangyi.png">
													</image>
													<image v-else-if="data.online_status==0" mode="widthFix"
														class="image width40 ml10 mr10" src="/static/lixianyi.png">
													</image>
													<view class="">
														<view class="color333 size24">{{data.name}}</view>
														<view v-if="data.online_status==1"
															class="wh5-5 bg27e17a posiab left-40 top20"></view>
														<view v-else-if="data.online_status==0"
															class="wh5-5 bgfc474c posiab left-40 top20"></view>
														<view v-else-if="data.online_status==2"
															class="wh5-5 bgf17e2f posiab left-40 top20"></view>
													</view>
												</view>
											</template>
										</el-tree>
																		
									</scroll-view>
		
								</el-tab-pane>
							</el-tabs>
		
						</view>
						<view class="flex1 pg30 size28">
							<view class="flex-ju-b">
								<view>
									<view>已选：<text class="color165FFF">{{mottinglist.length}}</text></view>
								</view>
								<view @click="all_clear" class="color165FFF">清空</view>
							</view>
							<scroll-view scroll-y class="scroll-view height950">
								<view class="flex-a-i flex-wrap">
									<view v-for="(item,index) in mottinglist" :key="index"
										class="bge8efff flex-a-i pg2-20 mr30 mt30">
										<image mode="widthFix" class="image width50" src="/static/img/xaing.png"></image>
										{{item.name?item.name:item.departmentName}}
										<image @click="tapClose(item,index)" mode="widthFix" class="image ml10 width24"
											src="/static/img/guanbi.png">
										</image>
									</view>
								</view>
							</scroll-view>
							
						</view>
					</view>
					<view class="flex-row mr60 mt50">
						<view class="flex-a-i ">
							<view @click="$refs.upInvite.close()" class="wh152-64 borderd0d6dc flex-ju-c ra5">取消</view>
							<view @click="confirm" class="wh152-64 colorfff flex-ju-c bg165FFF ml60 ra5">确定</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
			
	</view>
</template>

<script>
	export default {
		name:"invite-communication",
		props:['type','defaultMO','defaultME','motting'],
		data() {
			return {
				searchVlaue: "",
				monitorLIST: [],
				activeName: "first",
				huiyilist: [],
				mottinglist: [],
				jiankonglist: [],
				tabdatapane: [],
				searchData: false,
				checkedCities: [63],
				searchMeetingMonitor: [],
				meeting_val: [],
				monitor_val: [],
				defaultMeeting: [],
				defaultMonitor: [],
				datasSearch: [],
				defaultChecked: [],
			};
		},
		
		methods:{
			monitorCheckedCitiesChange(val) {
				this.monitor_val = val
				let arr = []
				val.map(item => {
					arr.push(item.id)
				})
				this.defaultMonitor = arr
				this.mottinglist = [...this.jiankonglist, ...this.huiyilist, ...this.meeting_val, ...this.monitor_val,...this.motting];
			},
			meetingCheckedCitiesChange(val) {
				this.meeting_val = val
				let arr = []
				val.map(item => {
					arr.push(item.userId)
				})
				this.defaultMeeting = arr
				this.mottinglist = [...this.jiankonglist, ...this.huiyilist, ...this.meeting_val, ...this.monitor_val,...this.motting];
			},
			onSearch() {
				if (this.searchVlaue) {
					this.searchData = true
					uni.showLoading()
					if (this.activeName == 'second') {
						this.datasSearch = []
						this.http('/v1/organization/tree/list', {
							searchName: this.searchVlaue
						}).then(res => {
							uni.hideLoading()
							this.monitorTree(res.data)
							// this.datasSearch = res.data
						})
					} else {
						this.searchMeetingMonitor = []
						this.http('/v1/organization/meeting/tree/list', {
							searchName: this.searchVlaue
						}).then(res => {
							uni.hideLoading()
							var data = [res.data]
							this.traverseTree(data, 1)
							//this.tabdatapane = data
						})
					}
				} else {
					this.searchData = false
					// this.tabClick(this.activeName)
				}
			},
			confirm() {
				if(this.type){
					this.$emit('mottingData',this.mottinglist)
					return
				}
				let monitorIDs = []
				uni.showLoading()
				this.mottinglist.map(item => {
					if (item.id) {
						monitorIDs.push(item.id + '')
					} else {
						zjsdk3.host_dial_out(item.userCuid, 'auto')
					}
				})
				uni.hideLoading()
				zjsdk3.ags_invite_ipc(monitorIDs)
				this.$refs.upInvite.close()
			},
			tapClose(item, index) {
				if (item.departmentName) {
					this.$refs.myTree1.setChecked(item, false);
				} else {
					this.$refs.myTree.setChecked(item, false);
				}
				this.mottinglist.splice(index, 1)
			},
			all_clear() {
				this.defaultMonitor=[]
				this.defaultMeeting=[]
				this.jiankonglist=[]
				this.checkedCities=[]
				this.mottinglist = []
				this.huiyilist=[]
				this.meeting_val=[]
				this.monitor_val=[]
				
					this.$refs.myTree1.setCheckedKeys([]);
					this.$refs.myTree.setCheckedKeys([]);
				
			},
			currentChange(index, item) {
				let arr = []
				item.checkedNodes.map(item => {
					if (!item.children) {
						arr.push(item)
					}
				})
				this.huiyilist = arr
				this.mottinglist = [...this.jiankonglist, ...this.huiyilist, ...this.meeting_val, ...this.monitor_val,...this.motting];
			},
			currentChange1(index, item) {
				let arr = []
				item.checkedNodes.map(item => {
					if (!item.children.length) {
						arr.push(item)
					}
				})
				this.jiankonglist = arr
				this.mottinglist = [...this.jiankonglist, ...this.huiyilist, ...this.meeting_val, ...this.monitor_val,...this.motting];
			},
			open(){
				
				
				
				this.monitorLIST = []
				this.activeName = 'first'
				this.http('/v1/organization/meeting/tree/list').then(res => {
					var data = [res.data]
					this.traverseTree(data)
					this.$refs.upInvite.open()
					this.tabdatapane = data
					if(this.type){
						 this.mottinglist = this.motting
						this.checkedCities=this.defaultME
					}
				})
			},
			close(){
				this.$refs.upInvite.close()
			},
			tabClick(e) {
				
				this.searchData = false
				this.activeName = e
				if (this.searchVlaue) {
					this.onSearch()
				} else {
					if (this.monitorLIST.length) {
						return
					}
					if (e == 'second') {
						uni.showLoading()
						this.http('/v1/organization/tree/list').then(res => {
							uni.hideLoading()
							this.monitorLIST = res.data
						})
					}
				}
			},
			monitorTree(node) {
				node.map(item => {
					this.datasSearch.push(item)
					if (item.children && item.children.length) {
						this.monitorTree(item.children)
					}
				})
			},
			traverseTree(node, type) {
				node.map(item => {
					if (item.meetingUsers && item.meetingUsers.length) {
						item.meetingUsers.map(a => {
							if (type) {
								this.searchMeetingMonitor.push({
									disabled:a.userOnlineStatus==2,
									departmentName: a.userNickName,
									userId: a.userId,
									userCuid: a.userCuid,
									userOnlineStatus: a.userOnlineStatus,
									userIsEndpoints: a.userIsEndpoints,
									userLoginId: a.userLoginId,
								})
							}
							item.children.push({
								disabled:a.userOnlineStatus==2,
								departmentName: a.userNickName,
								userId: a.userId,
								userCuid: a.userCuid,
								userOnlineStatus: a.userOnlineStatus,
								userIsEndpoints: a.userIsEndpoints,
								userLoginId: a.userLoginId,
							})
						})
					}
					if (item.children && item.children.length) {
						this.traverseTree(item.children, type)
					}
				})
			},
		}
	}
</script>

<style>

</style>